<template>
	<u-row class="custom-block" :gutter="gutter">
		<u-col v-for="(widget, index) in validWidgetList" :key="index"
			:class="subWidgetClass"
			:span="widget.props.span / 2 || 24"
		>
			<view :style="{'marginBottom': (widget.props.paddingBottom ? widget.props.paddingBottom : 0) + 'px'}">
				<OnlineCustomWidget
					:value="getWidgetValue(widget)"
					:class="subWidgetClass"
					:widget="widget"
					@input="(val) => onWidgetValueChange(widget, val)"
					@change="(val, detail) => onChange(widget, val, detail)"
				/>
			</view>
		</u-col>
	</u-row>

</template>

<script>
	import OnlineCustomWidget from './OnlineCustomWidget.vue';

	export default {
		name: 'onlineCustomBlock',
		options: {
			styleIsolation: 'shared', // 解除样式隔离
		},
		props: {
			gutter: {
				type: Number,
				default: 0
			},
			widgetList: {
				type: Array,
				default: () => []
			},
			subWidgetClass: {
				type: String
			},
			operation: {
				type: Object
			}
		},
		components: {
			OnlineCustomWidget
		},
		inject: ['form'],
		methods: {
			getWidgetValue(widget) {
				if (this.operation && typeof this.operation.getWidgetValue === 'function') {
					return this.operation.getWidgetValue.call(this.$parent, widget); // 解决父子组件this问题
				} else {
					return this.form().getWidgetValue(widget);
				}
			},
			onWidgetValueChange(widget, val) {
				this.form().onValueChange(widget, val);
			},
			onChange(widget, val, detail) {
				if (this.operation && typeof this.operation.onWidgetValueChange === 'function') {
					return this.operation.onWidgetValueChange(widget, val, detail);
				} else {
					return this.form().onWidgetValueChange(widget, val, detail);
				}
			}
		},
		computed: {
			validWidgetList() {
				return this.widgetList.filter(widget => this.form().getWidgetVisible(widget));
			}
		}
	}
</script>

<style>
	.filter-item .u-col {
		margin-top: 20rpx;
	}
	.custom-block ::v-deep .u-form-item{
		border-bottom: 1px solid #F7F8FA;
	}
	.u-field{
		border-bottom: 1px solid #F7F8FA;
	}
</style>
